<template>
  <div class="table">
    <el-table
      style="width: 100%"
      class="customer-table"
      :data="taskOperationList"
    >
      <el-table-column
        type="index"
        label="序号"
        width="80"
      />
      <el-table-column
        prop="taskCode"
        label="工单编号"
      />
      <el-table-column
        prop="innerCode"
        label="设备编号"
      />
      <el-table-column
        property="taskType.typeName"
        label="工单类型"
      />
      <el-table-column
        prop="createType"
        :formatter="createType"
        label="工单方式"
      />
      <el-table-column
        property="taskStatusTypeEntity.statusName"
        label="工单状态"
      />
      <el-table-column
        prop="userName"
        label="运营人员"
      />
      <el-table-column
        prop="createTime"
        label="创建日期"
        width="160px"
        :formatter="createTime"
      />
      <el-table-column
        label="操作"
      >
        <template slot-scope="{row}">
          <span class="details" @click="detalis(row)">查看详情</span>
        </template>
      </el-table-column>
    </el-table>

    <keep-alive>
      <component :is="componentName" :is-show-details.sync="isShowDetails" :current-table-list="currentTableList" />
    </keep-alive>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import taskCancel from './taskCancel.vue'
import taskFinish from './taskFinish.vue'
import taskBacklog from './taskBacklog.vue'

export default {
  components: { taskBacklog, taskCancel, taskFinish },
  props: {
    taskOperationList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      isShowDetails: false,
      currentTableList: {},
      status: 0
    }
  },
  computed: {
    componentName() {
      if (this.status === 1) {
        return taskBacklog
      } else if (this.status === 3) {
        return taskCancel
      }
      return taskFinish
    }

  },

  methods: {
    createType(row) {
      // console.log(row)
      return row.createType === 1 ? '手动' : '自动'
    },
    createTime(row) {
      return dayjs(row.createTime).format('YYYY.MM.DD HH:mm:ss')
    },
    detalis(row) {
      // console.log(row)
      this.currentTableList = row
      this.currentTableList.typeName = row.taskType.typeName
      this.currentTableList.typeId = row.taskType.typeId
      this.isShowDetails = true
      this.status = row.taskStatusTypeEntity.statusId
    }

  }

}
</script>

<style lang="scss" scoped>
 .table {
    margin-top: 20px;
      ::v-deep .el-table th, .el-table tr th td {
         background: rgb(243, 246, 251);
         border: none;
         font-size: 14px;
         color: #666;
    }
    .el-table::before {
     height: 0;
    }
   ::v-deep .el-table td {
        border-bottom:none;
    }

  }
  .details {
    color: #5f84ff;
    font-size: 14px;
    font-weight: 500;
  }

</style>
